<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
</head>
<body>
    <script src="..//vue@2.6.14.min.js"></script>
    <div id="app">
        <h3>Vue中的组件使用分为三步：创建组件、注册组件、使用组件</h3>
        <!-- 3. 使用组件 -->
        <xiaoming></xiaoming>
        <zhangsan></zhangsan>
        <dilireba></dilireba>
    </div>
    <script>
        // 1. 创建组件
        const xiaoming = {
            // 如果template里面有多个标签，那么需要一个div标签进行包裹
            template: `
                <div>
                    <p>{{msg}}</p>
                    <button @click="showTitle">点击提示本文件标题</button>
                    <hr>
                </div>
            `,
            data() {
                return {
                    msg: '这是一个关于小明的组件'
                }
            },
            methods: {
                showTitle() {
                    alert(document.title);
                }
            }
        }

        const zhangsan = {
            template: `
                <p>{{msg}}</p>
            `,
            data() {
                return {
                    msg: '这是一个关于张三的组件'
                }
            }
        }

        const dilireba = {
            template: `
                <div>
                    hello, 这是dilireba组件    
                </div>
            `
        }

        // 2. 全局注册组件。可以用到任意的根标签里的组件。
        // 第一个参数是组件名，第二个参数是创建好的组件
        Vue.component('dilireba', dilireba);
        new Vue({
            el: '#app',
            data() {

            },
            // 2. 局部注册组件。 在哪个根el里注册的组件，就只能用在这个根el里面。
            // 比如xiaoming这个组件是注册在#app这个根标签里的，xiaoming这个组件就只能用在<div id="app"></div>里面
            components: {
                xiaoming,
                zhangsan
            }
        })
    </script>
</body>
</html>